<template>
	<view>
		<view class="logo">
			<view class="img">
				<image mode="widthFix" src="/static/logo.png">
				</image>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<view class="form">
			<view class="username">
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="passwd" password=true
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="btn" @tap="doLogin">登 录</view>
			<view class="res">
				<view @tap="toPage('register')">用户注册</view>
				<view @tap="toPage('resetpasswd')">忘记密码</view>
			</view>
		</view>
		<!-- 第三方登录 -->
		<view class="oauth" v-if="isShowOauth">
			<view class="text">— 快速登录 —</view>
			<view class="list">
				<view @tap="oauthLogin('weixin')" v-if="showProvider.weixin" class="icon weixin"></view>
				<view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
				<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view>
				<view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import md5 from "@/common/SDK/md5.min.js";
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import { genTestUserSig } from '@/TUIKit/debug/GenerateTestUserSig';
	import { TUILogin } from '@tencentcloud/tui-core';
	// #ifdef APP-PLUS || H5
	import { TUIChatKit } from '../../TUIKit';

	TUIChatKit.init();
	// #endif

	let vueVersion = 2;
	// #ifdef VUE3
	vueVersion = 3;
	// #endif
	export default {
		data() {
			return {
				phoneNumber: '',
				passwd: '',
				isShowOauth: false,
				showProvider: {
					weixin: false,
					qq: false,
					sinaweibo: false,
					xiaomi: false
				}
			}
		},
		onShow() {

		},
		onLoad(query) {
			//APP显示第三方登录
			// #ifdef APP-PLUS
			this.isShowOauth = true;
			// #endif
			this.getProvider();
			// console.log("网络",this);
			if (query) {
				this.phoneNumber = query.phone
				this.passwd = query.passwd
			}

		},
		methods: {
			...mapActions(['Login', 'GetuserInfo']),
			oauthLogin(provider) {
				uni.showLoading();
				//第三方登录
				uni.login({
					provider: provider,
					success: (loginRes) => {
						console.log("success: " + JSON.stringify(loginRes));
						//案例直接获取用户信息，一般不是在APP端直接获取用户信息，比如微信，获取一个code，传递给后端，后端再去请求微信服务器获取用户信息
						uni.getUserInfo({
							provider: provider,
							success: (infoRes) => {
								console.log('用户信息：' + JSON.stringify(infoRes.userInfo));
								uni.setStorage({
									key: 'UserInfo',
									data: {
										username: infoRes.userInfo.nickName,
										face: infoRes.userInfo.avatarUrl,
										signature: '个性签名',
										integral: 0,
										balance: 0,
										envelope: 0
									},
									success: function () {
										uni.hideLoading()
										uni.showToast({
											title: '登录成功',
											icon: "success"
										});
										setTimeout(function () {
											uni.navigateBack();
										}, 300)
									}
								});
							}
						});
					},
					fail: (e) => {
						console.log("fail: " + JSON.stringify(e));
					}
				});
			},
			getProvider() {
				//获取第三方登录服务
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						let len = res.provider.length;
						for (let i = 0; i < len; i++) {
							//有服务才显示按钮图标
							this.showProvider[res.provider[i]] = true;
						}
						if (res.provider.length == 0) {
							this.isShowOauth = false;
						}
					}
				});
			},
			toPage(page) {
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			},
			doLogin() {
				uni.hideKeyboard();
				//验证手机号码
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}

				const that = this
				const {
					Login,
					GetuserInfo
				} = this
				// console.log("xinxi", {
				// 	phone: this.phoneNumber,
				// 	password: this.passwd
				// });
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例比对本地储存的用户信息，实际使用中请替换为上传服务器比对。
				uni.hideLoading();
				Login({
					phone: this.phoneNumber,
					password: this.passwd
				}).then(res => {

					console.log('xinxi2', res);
					// that.show()
					const aa1 = genTestUserSig({ SDKAppID: 1600084628, secretKey: "be7e8cc168feb00b6c562b4ef8c46ccfea630bd3325d8cad87e351ddd778a165", userID: this.phoneNumber })
					console.log('信息', aa1);
					TUILogin.login({
						SDKAppID: 1600084628,
						userID: this.phoneNumber,
						userSig: aa1.userSig,
						useUploadPlugin: true, // If you need to send rich media messages, please set to true.
						framework: `vue${vueVersion}` // framework used vue2 / vue3
					}).then(res => {
						console.log("xiao洗", res);
						// let chat = TencentCloudChat.create({
						// 	SDKAppID: 1600084628
						// }); // SDK 实例通常用 chat 表示

						// chat.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
						// console.log("xx", chat.getTotalUnreadMessageCount());
						uni.setStorageSync("isReady", true)
					}).catch(() => { });

					uni.showToast({
						title: "登录成功",
						icon: "none"
					});
					// console.log('dengl',uni);
					// console.log('that', that);
					// console.log('this', that.$store.user.userinfo);

					GetuserInfo().then(userDetails => {
						console.log('用户', userDetails);
						that.userinfo = userDetails;
						uni.reLaunch({
							url: "/pages/my/my"
						})
						// // that.$set(that.userinfo, 'username',
						// '李白'); // Update the username
						// that.$set(that.userinfo, 'id', '1001'); // Update the username
					})
					console.log('this', that.userinfo);

				}).catch(err => {
					console.log("err", err);
					uni.showToast({
						title: "登录失败",
						icon: "none"
					});
				})
				// this.$http.post('/employees/modileLogin', {
				// 	phone: this.phoneNumber,
				// 	password: this.passwd
				// }).then(res => {
				// 	uni.hideLoading()
				// 	console.log('res', res);
				// })
				// setTimeout(()=>{
				// 	let md5PW = md5(this.passwd)
				// 	uni.getStorage({
				// 		key: 'UserList',
				// 		success: (res)=>{
				// 			for(let i in res.data){
				// 				let row = res.data[i];
				// 				if(row.username==this.phoneNumber){
				// 					uni.hideLoading()
				// 					//比对密码
				// 					if(md5PW == res.data[i].passwd){
				// 						uni.showToast({title: '登录成功',icon:"success"});
				// 					}else{
				// 						uni.showToast({title: '账号或密码不正确',icon:"none"});
				// 					}
				// 				}
				// 			}
				// 		},
				// 		fail:function(e){
				// 			uni.hideLoading()
				// 			uni.showToast({title: '手机号码未注册',icon:"none"});
				// 		}
				// 	});
				// },1000)
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	.form {
		.res {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}

	.oauth {
		@media all and (max-height:150vw) {
			display: none;
		}

		position: absolute;
		bottom: 50upx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($color: #ffffff, $alpha: 0.8);
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}
</style>